<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>五彩导航</title>
    <style>
      a {
        display: inline-block;
        width: 120px;
        height: 60px;
        background-repeat: no-repeat;
        color: #f2f2f2;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
      }
      .first {
        background-image: url("img.png");
      }
      .first:hover {
        background-image: url("img_1.png");
      }
      .second {
        background-image: url("img_1.png");
      }
      .second:hover {
        background-image: url("img.png");
      }
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        border-top: 1px solid red;
      }
      div {
        border-top: 3px #ff8500 solid;
        border-bottom: 1px #edeef0 solid;
        height: 41px;
        background-color: #fcfcfc;
      }
      .menu {
        display: inline-block;
        color: #4c4c4c;
      }
      a:hover {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <a class="first">五彩导航</a>
    <a class="second">五彩导航</a>
    <div class="box"></div>
    <div>
      <a href="#" class="menu">设为首页</a>
    </div>
  </body>
</html>
